<template>
  <div class="mine">
    <div class="top">
      <div class="set" @click="goset">设置</div>
      <div class="info">
        <div class="headImg">
          <img :src="info.img" alt="" />
        </div>
        <div class="box1">
          <div class="name">{{ info.name }}</div>
          <div class="ziliao" @click="goPerson">完善资料&nbsp;&gt;</div>
        </div>
        <div class="seek">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psm5pea1weynjqzptxova4icwubma51u3jb5fd1012-d896-4462-bfc1-1c0f89eb7b13"
            alt=""
          />
          <span>咨询</span>
        </div>
      </div>
      <div class="box2">
        <div class="item" @click="goDay">
          <p>0</p>
          <p>日记</p>
        </div>
        <div class="item" @click="gopost">
          <p>0</p>
          <p>帖子</p>
        </div>
        <div class="item" @click="gozuji">
          <p>0</p>
          <p>足迹</p>
        </div>
        <div class="item" @click="gocare">
          <p>0</p>
          <p>关注</p>
        </div>
        <div class="item" @click="gofans">
          <p>0</p>
          <p>粉丝</p>
        </div>
      </div>
      <div class="box3">
        <span>美悦PLUS会员</span>
        <span>享会员价再立减118元</span>
        <button @click="govip">立即开通</button>
      </div>
    </div>
    <div class="order">
      <div class="box4">
        <span>我的订单</span>
        <span @click="goOrder(0)">查看全部订单&nbsp;&gt;</span>
      </div>
      <div class="box5">
        <div class="check" @click="goOrder(1)">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psfrivzwkpiz8dj1367qczn5yafzmdrydnc91584d04-b43a-4d3a-abec-cd66f475e932"
            alt=""
          />
          <p>待支付</p>
        </div>
        <div class="check" @click="goOrder(2)">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psp31gbs2wzndxtcc29cuwtdeodzi3m03o1651cff9-39aa-4f0c-ab59-4428ce2039cc"
            alt=""
          />
          <p>待消费</p>
        </div>
        <div class="check" @click="goEvaluate">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps4kps00rvc5d0bhyurdpgsfnw6y89qzqj0d7a6ebb-2b4f-485c-a2ed-20ac547c233c"
            alt=""
          />
          <p>待评价</p>
        </div>
        <div class="check" @click="goOrder(3)">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psqfl0mbr9wnhomd08r7vibcc5k92fwbuk3ea1930e-bf35-460c-b9e2-ff1c3e09a54b"
            alt=""
          />
          <p>已使用</p>
        </div>
        <div class="check" @click="goOrder(4)">
          <img
            src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/2df6ecb80d494b3094287ef24b2304bc_mergeImage.png"
            alt=""
          />
          <p>退款</p>
        </div>
      </div>
    </div>
    <div class="ad">
      <van-swipe class="my-swipe" :autoplay="1500" indicator-color="white">
        <van-swipe-item
          ><img
            src="https://img0.baidu.com/it/u=2034434865,3188101391&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=125"
            alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img
            src="https://img2.baidu.com/it/u=852557606,3511738324&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500"
            alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img
            src="https://img0.baidu.com/it/u=1427518673,1172497348&fm=253&fmt=auto&app=138&f=JPEG?w=970&h=485"
            alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img
            src="https://img1.baidu.com/it/u=3658423184,1910477468&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=247"
            alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <div class="foot">
      <div class="row">
        <div class="box6" @click="goCart">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps77td496xolia56tcu35mtczgva2h8asq6f299544-1c74-48c0-803f-20bcbf940a60"
            alt=""
          />
          <p>购物车</p>
        </div>
        <div class="box6" @click="goFav">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps6bcvueg1v5fnt6e2ij6dqujs2fkgepm12fa0407-09dd-4ea1-9f84-bb6a17ace6a5"
            alt=""
          />
          <p>我的收藏</p>
        </div>
        <div class="box6">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps7w00e40sl5jnfzabw060freumew82900709ac1f42-9313-4f00-aad8-9f1499f02db3"
            alt=""
          />
          <p>优惠券红包</p>
        </div>
        <div class="box6">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psvbqw83g3wea15hww3g6f5o54fgzi70ah5cd24228-8273-4e69-9512-9b8230865005"
            alt=""
          />
          <p>内容管理</p>
        </div>
      </div>
      <div class="row">
        <div class="box6">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psgbtwz9a5ywedelne2qv4xefbqml2l5b4r7b3774e7-6a56-4c07-b762-2fb62960e080"
            alt=""
          />
          <p>问医生</p>
        </div>
        <div class="box6">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psmbl3q97ytleshi5qa61dlpplleehaoelq294c260b-e8dc-4813-aba4-7158fbd97512"
            alt=""
          />
          <p>问诊卡</p>
        </div>
        <div class="box6">
          <img
            src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/734beeea3d3445bca64f77390cb3bb6c_mergeImage.png"
            alt=""
          />
          <p>招募活动</p>
        </div>
        <div class="box6">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psdl5zgj98ydz0g5x0rglnn8e1yw6z9uqb07f26d7-2f71-46ab-a30d-aaa203ceb1c8"
            alt=""
          />
          <p>任务中心</p>
        </div>
      </div>
      <div class="row row3">
        <div class="box6">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/pskuj461nckwemdgoxoj89vbbaqty07y9dc51af04b-5a27-4dd6-8e26-248275ba4884"
            alt=""
          />
          <p>意见反馈</p>
        </div>
        <div class="box6" @click="goLogin">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps9fuui5zwnb8yxa3un23sx7qt2wnxf01tc04e1680-57ff-4327-903e-653a73e1cd6e"
            alt=""
          />
          <p>官方客服</p>
        </div>
      </div>
      <div class="row"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        img: "https://img0.baidu.com/it/u=661161858,172661768&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        nickName: "马兴祖",
        sex: "男",
        birthday: "1999-08-03",
        location: "中国",
        phone: "13523633801",
      },
    };
  },
  methods: {
    gozuji() {
      this.$router.push("/Mine/Zuji");
    },
    gocare() {
      this.$router.push("/Mine/Care");
    },
    gofans() {
      this.$router.push("/Mine/Fans");
    },
    goset() {
      this.$router.push("/Mine/Set");
    },
    goFav() {
      this.$router.push("/Mine/Fav");
    },
    goPerson() {
      this.$router.push("/Mine/Person");
    },
    gopost() {
      this.$router.push("/Mine/Post");
    },
    govip() {
      this.$router.push("/Mine/Vip");
    },
    goEvaluate() {
      this.$router.push("/Mine/Evaluate");
    },
    goOrder(a) {
      this.$router.push({ path: "/Mine/Order", query: { num: a } });
    },
    goCart() {
      this.$router.push("/Home/Cart");
    },
    goDay() {
      this.$router.push("/Home/diaryContent");
    },
    goLogin(){
      this.$router.push("/login");
    }
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.top {
  width: 750px;
  height: 460px;
  background-color: #f1a3b1;
  color: rgba(255, 255, 255, 1);
}
.set {
  float: right;
  font-size: 40px;
  margin-right: 30px;
}
.info {
  width: 720px;
  height: 143px;
  margin: 0 0 0 29px;
  float: left;
}
.headImg {
  background-color: white;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  float: left;
  margin-top: 23px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.headImg img {
  width: 120px;
  height: 120px;
}
.box1 {
  width: 282px;
  height: 81px;
  margin: 47px 0 0 33px;
  float: left;
}
.name {
  width: 282px;
  height: 25px;
  font-size: 32px;
}
.ziliao {
  width: 150px;
  height: 25px;
  font-size: 26px;
  font-family: PingFangSC-Regular;
  white-space: nowrap;
  line-height: 26px;
  font-size: 25px;
  margin-top: 20px;
}
.seek {
  width: 146px;
  height: 64px;
  float: right;
  background-color: #f2b97c;
  margin-top: 35px;
  border-radius: 32px 0px 0px 32px;
  text-align: center;
  font-size: 29px;
  line-height: 64px;
}
.seek img {
  width: 30px;
  height: 28px;
}
.seek span {
  width: 57px;
  height: 29px;
  font-size: 30px;
  font-family: PingFangSC-Regular;
  text-align: center;
  white-space: nowrap;
  line-height: 30px;
}
.box2 {
  width: 750px;
  height: 143px;
  float: left;
  display: flex;
  margin-top: 40px;
  justify-content: space-around;
  text-align: center;
}
.box2 .item {
  width: 120px;
  height: 143px;
}
.box2 .item p:nth-of-type(2) {
  font-size: 30px;
  line-height: 90px;
}
.box3 {
  width: 690px;
  height: 80px;
  margin: 0 auto;
  background-color: black;
  clear: both;
  border-radius: 20px 20px 0px 0px;
}
.box3 span:nth-of-type(1) {
  width: 169px;
  height: 25px;
  color: rgba(251, 237, 216, 1);
  font-size: 26px;
  font-family: PingFangSC-Regular;
  text-align: center;
  white-space: nowrap;
  display: inline-block;
  line-height: 45px;
  margin: 20px 0 0 30px;
}
.box3 span:nth-of-type(2) {
  width: 205px;
  height: 21px;
  color: rgba(251, 237, 216, 1);
  font-size: 22px;
  font-family: PingFangSC-Regular;
  text-align: center;
  white-space: nowrap;
  display: inline-block;
  line-height: 22px;
  margin: 25px 0 0 62px;
}
.box3 button {
  background-color: rgba(234, 211, 206, 1);
  border-radius: 21px;
  height: 42px;
  width: 158px;
  float: right;
  font-size: 24px;
  color: rgba(51, 51, 51, 1);
  margin-top: 20px;
  border: 0px;
}
.order {
  width: 710px;
  height: 253px;
  margin: 0 auto;
}
.box4 {
  width: 710px;
  height: 50px;
}
.box4 span:nth-of-type(1) {
  font-size: 15px;
  float: left;
  margin-top: 5px;
}
.box4 span:nth-of-type(2) {
  font-size: 15px;
  float: right;
  margin-top: 5px;
}
.box5 {
  width: 710px;
  height: 137px;
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
  text-align: center;
  font-size: 21px;
  line-height: 50px;
}
.box5 .check {
  width: 120px;
  height: 137px;
}
.box5 .check img {
  width: 42px;
  height: 37px;
  margin-top: 2px;
}
.ad {
  width: 700px;
  height: 262px;
  margin: 0 auto;
  overflow: hidden;
}
.ad img {
  width: 700px;
  height: 262px;
}
.foot {
  width: 648px;
  height: 400px;
  margin-top: 53px;
  text-align: center;
  margin: 0 auto;
  margin-top: 50px;
  font-size: 21px;
}
.row {
  width: 648px;
  height: 81px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 100px;
  justify-content: space-between;
}
.row3 {
  justify-content: flex-start;
}
.row3 .box6 {
  margin-right: 35px;
}
.box6 {
  width: 21%;
  height: 81px;
  box-sizing: border-box;
}
.box6 img {
  width: 42px;
  height: 39px;
}
.box6 p {
  height: 21px;
  color: rgba(102, 102, 102, 1);
  font-size: 22px;
  font-family: PingFangSC-Regular;
  text-align: center;
  white-space: nowrap;
  line-height: 22px;
  margin-top: 23px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 262px;
  text-align: center;
}
</style>
